浅谈 Flexible Box

flex 容器

文档中采用了 flexbox 的区域就叫做 flex 容器。为了让一个元素成为 flex 容器，需要将其 display 属性设为 flex。

大多数元素的默认 display 属性值为 inline（行内元素）或 block（块级元素）。

flex 容器的任何直接子元素都称为弹性项目（flex item）。我们正是要对这些弹性项目进行布局。

两根轴线

当使用 flex 布局时，两根轴线——主轴和交叉轴——是至关重要的。它们互相垂直，控制着 flex 布局的方向。

主轴（main axis）由 flex-direction 定义，可以取 4 个值：

• row（默认）和 row-reverse 表示主轴是水平的（也就是行向）。
• column 和 column-reverse 表示主轴是竖直的（也就是块向）。

交叉轴（cross axis）和主轴是垂直的，因此主轴定义后就自然而然可知交叉轴的方向。

主轴规定了弹性项目应当向何处延伸。如果主轴水平，那么弹性项目就是按行排列；反之则弹性项目按列排列。

但是问题来了：知道主轴水平了，那弹性项目是从左到右排列还是从右到左排列？这就引出了轴线的起点与终点的概念：弹性项目是沿着主轴的从起点到终点的方向排列的。

• row 表示从左到右，主轴起点在左终点在右（默认）；row-reverse 表示从右到左。
• column 表示从上到下；column-reverse 表示从下到上。

对于下面这个例子：

.container {
  display: flex;
  flex-direction: row;
}

无论我往 .container 中塞进多少子元素，它们都会排列在一行中直至溢出。要实现自动换行需要添加属性 flex-wrap，并将其值设为 wrap（默认为 nowrap）。

如果你实现了自动换行，你就应该将每行视为一个新的 flex 容器。任何空间分布都将发生在每行中，而与前一行或后续行无关。

对于每一行行内的项目，如果我想要精细控制它们之间的布局，就需要使用 justify-content。

• start 和 end 表示项目从起点/终点开始排列。这和段落文本的对齐方式很像。在 flex 布局中专用名称是 flex-start 和 flex-end。
• center 表示居中排列这一行的项目。就像文本居中一样。
• space-between、space-around 和 space-evenly 都表示在每行上均匀分配弹性项目。
  • space-between 每行第一个项目与起点对齐，每行最后一个项目与终点对齐。
  • space-around 每行第一个项目到起点的距离和每行最后一个项目到终点的距离将会是相邻项目之间距离的一半。
  • space-evenly 相邻项目的间距，主轴起点到第一个项目的间距，最后一个项目到主轴终点的间距，都完全一样。